<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>应收账单</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="./css/comm.css" />
    <link rel="stylesheet" type="text/css" href="./css/chargeroomfee.css" />
    <style>
        .aui_formcontent {
            padding-right: 20px;
        }

        /* .aui-list {
            background: #f9f9f9;
        } */
        .editbtn{
            position: absolute;
            top: 2.2rem;
            right: 8px;
            z-index: 999;
            width: 1rem;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="mask_bg" v-on:click="doCloseRoom()" v-if="roomModel.IsRoomOpen"></div>
        <div class="choose_box" v-if="roomModel.IsRoomOpen">
            <span class="close_btn" v-on:click="doCloseRoom()">
                <i class="icon iconfont icon-guanbi"></i>
            </span>
            <div class="choose_room_title">选择关联房间
            </div>
            <div class="choose_room_content">
                <div v-on:click="doSelectRoom(item)" class="choose_room_item" v-for="item in roomModel.roomList">
                    <input v-bind:checked="item.isSelected" type="checkbox" class="aui-checkbox" />
                    <label>{{item.name}}</label>
                </div>
            </div>
        </div>
        <ul class="aui-list aui-form-list main_room_form">
            <li class="aui-list-item">
                <!-- <div class="aui-list-item-label">
                    住户名称
                </div> -->
                <div class="aui-list-item-input">
                    {{roomModel.currentRelationName}}
                </div>
            </li>
            <li class="aui-list-item item-second" v-on:click="doOpenChooseRoom()">
                <div class="aui-list-item-label">
                    缴费范围<span class="blue">(已选{{roomModel.currentIdList.length}}户)</span>
                </div>
                <div class="aui-list-item-input zkss">
                    {{roomModel.currentRoomName}}
                    <i v-if="!roomModel.IsRoomOpen" class="icon iconfont icon-down"></i>
                    <i v-if="roomModel.IsRoomOpen" class="icon iconfont icon-shangjiantou"></i>
                    <!-- <img v-if="!roomModel.IsRoomOpen" src="../image/arrow_b.png">
                    <img v-if="roomModel.IsRoomOpen" src="../image/arrow_t.png"> -->
                </div>
            </li>
        </ul>
        <div class="aui_title zkss"
            style="padding-left:12px; padding-right: 12px; padding-top: 1.2rem!important; font-size:0.8rem;"
            v-on:click="doViewMoreFee()">
            <div>
                <span>应收账单</span>
                <label class="zkssbtnopen" v-if="!roomModel.IsRoomFeeOpen&&roomModel.feeList.length>0">展开</label>
                <label class="zkssbtnopen" v-if="roomModel.IsRoomFeeOpen&&roomModel.feeList.length>0">收起</label>
                <!-- <i v-if="!roomModel.IsRoomFeeOpen&&roomModel.feeList.length>0" class="icon iconfont icon-down"></i>
            <i v-if="roomModel.IsRoomFeeOpen&&roomModel.feeList.length>0" class="icon iconfont icon-shangjiantou"></i> -->
            </div>
            <div class="zkssdetail"><span>详情</span>模式下，显示每个资源的应收账单明细</div>

        </div>
        <div class="aui-content contentBox">


            <!-- <div v-if="roomModel.feeList.length>0" class="aui_list inside list-sidebor"
                v-for="(item,index) in roomModel.feeList">
                <ul class="aui-list aui-form-list summary-list">
                    <div class="ul-title ul-title_yfzd" v-on:click="choose_fee(item,index)">
                        <input v-bind:id="'fee_'+item.id"
                            v-if="item.IsCanSelect&&!item.NeedChargeWechatAll&&item.DiscountApproveState!=8"
                            type="checkbox" class="aui-radio fl" v-bind:checked='item.Selected'>
                        <div class="yfzd_con_input fl">
                            {{item.Name}}
                            <label class="warningmsg">
                                {{item.WarningMsg}}
                            </label>
                        </div>
                        <div class="fr countMony">
                            ￥{{item.TotalCost.toFixed(2)}}
                            <div class="pay_cost" v-if="item.TotalPayCost>0">
                                (已收{{item.TotalPayCost.toFixed(2)}})
                            </div>
                        </div>
                    </div>
                    <div class="cl"></div>
                    <div class="ul-title ul-title_yfzd" v-if="roomModel.IsRoomFeeOpen">
                        <div class="yfzd_con_input fl">
                            优惠金额
                            <label class="warningmsg" v-if='item.DiscountApproveStateDesc'>
                                {{item.DiscountApproveStateDesc}}
                            </label>
                        </div>
                        <div class="fr countMony">
                            ￥{{item.DiscountCost.toFixed(2)}}
                        </div>
                    </div>
                    <div class="cl"></div>
                    <div class="ul-title ul-title_yfzd" v-if="roomModel.IsRoomFeeOpen">
                        <div class="yfzd_con_input fl">
                            违约金
                        </div>
                        <div class="fr countMony">
                            ￥{{item.BreakTotalCost.toFixed(2)}}
                        </div>
                    </div>
                    <div class="cl"></div>
                    <li class="aui-list-item" v-if="item.StartEndPoint&&roomModel.IsRoomFeeOpen">
                        <div class="aui-list-item-inner" style="border-top: 0px; min-height:1.2rem;">
                            <div class="aui-list-item-label" style=" line-height:1.2rem;">
                                起止读数
                            </div>
                            <div class="aui-list-item-input">
                                <input class="txtright" style="color:#999; font-size:0.75rem;" readonly="readonly"
                                    type="text" v-bind:value="item.StartEndPoint">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item" v-if="item.CanChangeEndTime&&roomModel.IsRoomFeeOpen">
                        <div class="aui-list-item-inner" style="border-top: 0px;">
                            <div class="aui-list-item-label" style="min-width:3rem;">
                                月数
                            </div>
                            <div v-if="item.DiscountApproveState==8||item.DiscountApproveState==9"
                                class="aui-list-item-input aui-bar-list-input" style=" width:100%; text-align: right;">
                                {{item.CalMonthNumber}}
                            </div>
                            <div v-if="item.DiscountApproveState!=8&&item.DiscountApproveState!=9"
                                class="aui-list-item-input aui-bar-list-input"
                                style=" width:100%; padding-left:10%; margin-right:35%;">
                                <div class="aui-bar aui-bar-btn" type="count">
                                    <div class="aui-bar-btn-item aui-font-size-20" v-on:click="do_reduce_month(item)">
                                        <i class="aui-iconfont aui-icon-minus" style="font-size:0.7rem;"></i>
                                    </div>
                                    <div class="aui-bar-btn-item inputbox">
                                        <input v-model="item.CalMonthNumber" type="number"
                                            class="aui-input aui-text-center" readonly="true">
                                    </div>
                                    <div class="aui-bar-btn-item aui-font-size-20" v-on:click="do_add_month(item)">
                                        <i class="aui-iconfont aui-icon-plus" style="font-size:0.7rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner" style="border-top:0px; line-height:2rem;">
                            <div class="label-content">
                                计费周期 {{item.StartTime==''?'--':item.StartTime}} 至
                                {{item.EndTime==''?'--':item.EndTime}}
                            </div>
                            <div v-if="item.IsCanSelect&&item.DiscountApproveState!=8&&item.DiscountApproveState!=9"
                                class="fr countMony" v-on:click="do_edit_fee(item)">
                                <i class="icon iconfont icon-bianji"></i>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item" v-if="false">
                        <div class="aui-list-item-inner" style="border-top: 0px;">
                            <div class="aui-list-item-label">
                                终止日期
                            </div>
                            <div v-if="item.CanChangeEndTime" class="aui-list-item-input datetime_box">
                                <input style="color:#333;" class="time_btn" type="text" readonly v-model="item.EndTime"
                                    v-bind:data-value="item.EndTime" v-bind:data_id="item.ID" />
                            </div>
                            <div v-if="!item.CanChangeEndTime" class="aui-list-item-input txtright">
                                {{item.EndTime}}
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="cl"></div>
            </div> -->


            <div v-if="itemb.list.length>0" class="aui_list inside list-sidebor"
                v-for="(itemb,index) in roomModel.feeList"
                style="border-bottom: dashed 0.5px #eee; margin-bottom: 1rem;">
                <ul class="aui-list aui-form-list summary-list">
                    <div class="ziyuaname">{{itemb.FullName}} </div>
                    <div class="summary_box">
                        <div v-for="(item,index) in itemb.list" style="position: relative;">
                            <div class="ul-title ul-title_yfzd" v-on:click="choose_fee(item,index)">
                                <input v-bind:id="'fee_'+item.id"
                                    v-if="item.IsCanSelect&&!item.NeedChargeWechatAll&&item.DiscountApproveState!=8"
                                    type="checkbox" class="aui-radio fl" v-bind:checked='item.Selected'
                                    style="margin-left: 6px; margin-top:8px;">
                                <div class="yfzd_con_input fl">
                                    {{item.Name}}
                                    <label v-if="item.IsCuiShouFee"
                                        class="warningmsg cuishou">{{item.WarningMsg}}</label>
                                    <label v-if="item.IsZuJinFee" class="warningmsg zujin">{{item.WarningMsg}}</label>
                                    <label v-if="item.IsBankChargeFee"
                                        class="warningmsg daikou">{{item.WarningMsg}}</label>
                                </div>
                                <div class="fr countMony" style=" padding-top: 8px; ">
                                    ￥{{item.TotalCost.toFixed(2)}}


                                </div>
                            </div>
                            <div v-if="item.IsCanSelect&&item.DiscountApproveState!=8&&item.DiscountApproveState!=9"
                                class="fr countMony editbtn" v-on:click="do_edit_fee(item)">
                                <i class="icon iconfont icon-bianji11"></i>
                            </div>
                            <div class="cl"></div>
                            <div class="zc_type_box" v-if="roomModel.IsRoomFeeOpen&&(item.DiscountApproveStateDesc
                                ||item.BreakTotalCost
                                ||item.TotalPayCost>0
                                ||item.StartEndPoint)">
                                <p class="triangle"></p>
                                <div class="zc_type_style po_youhui" v-if="item.DiscountCost">
                                    优惠:￥{{item.DiscountCost.toFixed(2)}}
                                    <div class="warningmsg" v-if='item.DiscountApproveStateDesc'>
                                        {{item.DiscountApproveStateDesc}}
                                    </div>
                                </div>
                                <div class="cl"></div>
                                <div class="zc_type_style" v-if="item.BreakTotalCost">
                                    违约金:￥{{item.BreakTotalCost.toFixed(2)}}
                                </div>
                                <div class="cl"></div>
                                <div class="zc_type_style" v-if="item.TotalPayCost>0">
                                    已收:￥{{item.TotalPayCost.toFixed(2)}}
                                </div>
                                <div class="cl"></div>
                                <div class="zc_type_style" v-if="item.StartEndPoint">
                                    起止读数:{{item.StartEndPoint}}
                                </div>
                            </div>

                            <!-- <div class="ul-title ul-title_yfzd" v-if="roomModel.IsRoomFeeOpen">
                        <div class="yfzd_con_input fl">
                            优惠金额
                            <label class="warningmsg" v-if='item.DiscountApproveStateDesc'>
                                {{item.DiscountApproveStateDesc}}
                            </label>
                        </div>
                        <div class="fr countMony">
                            ￥{{item.DiscountCost.toFixed(2)}}
                        </div>
                    </div> -->
                            <!-- <div class="cl"></div>
                    <div class="zc_type_style" v-if="roomModel.IsRoomFeeOpen">
                        <div class="yfzd_con_input fl">
                            违约金
                        </div>
                        <div class="fr countMony">
                            ￥{{item.BreakTotalCost.toFixed(2)}}
                        </div>
                    </div>
                    <div class="cl"></div> -->
                            <!-- <li class="aui-list-item" v-if="item.StartEndPoint&&roomModel.IsRoomFeeOpen">
                        <div class="aui-list-item-inner" style="border-top: 0px; min-height:1.2rem;">
                            <div class="aui-list-item-label" style=" line-height:1.2rem;">
                                起止读数
                            </div>
                            <div class="aui-list-item-input">
                                <input class="txtright" style="color:#999; font-size:0.75rem;" readonly="readonly"
                                    type="text" v-bind:value="item.StartEndPoint">
                            </div>
                        </div>
                    </li> -->
                            <!-- <li class="aui-list-item" v-if="item.CanChangeEndTime&&roomModel.IsRoomFeeOpen">
                        <div class="aui-list-item-inner" style="border-top: 0px;">
                            <div class="aui-list-item-label" style="min-width:3rem;">
                                月数
                            </div>
                            <div v-if="item.DiscountApproveState==8||item.DiscountApproveState==9"
                                class="aui-list-item-input aui-bar-list-input" style=" width:100%; text-align: right;">
                                {{item.CalMonthNumber}}
                            </div>
                            <div v-if="item.DiscountApproveState!=8&&item.DiscountApproveState!=9"
                                class="aui-list-item-input aui-bar-list-input"
                                style=" width:100%; padding-left:10%; margin-right:35%;">
                                <div class="aui-bar aui-bar-btn" type="count">
                                    <div class="aui-bar-btn-item aui-font-size-20" v-on:click="do_reduce_month(item)">
                                        <i class="aui-iconfont aui-icon-minus" style="font-size:0.7rem;"></i>
                                    </div>
                                    <div class="aui-bar-btn-item inputbox">
                                        <input v-model="item.CalMonthNumber" type="number"
                                            class="aui-input aui-text-center" readonly="true">
                                    </div>
                                    <div class="aui-bar-btn-item aui-font-size-20" v-on:click="do_add_month(item)">
                                        <i class="aui-iconfont aui-icon-plus" style="font-size:0.7rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li> -->
                            <li class="aui-list-item aui-list-item-time">
                                <div class="aui-list-item-inner item-inner-time" style="border-top:0px;">
                                    <div class="label-content content-time">
                                        {{item.StartTime==''?'--':item.StartTime}} 至
                                        {{item.EndTime==''?'--':item.EndTime}}（{{item.CalMonthNumber}}个月）
                                    </div>
                                </div>
                            </li>
                            <li class="aui-list-item" v-if="false">
                                <div class="aui-list-item-inner" style="border-top: 0px;">
                                    <div class="aui-list-item-label">
                                        终止日期
                                    </div>
                                    <div v-if="item.CanChangeEndTime" class="aui-list-item-input datetime_box">
                                        <input style="color:#333;" class="time_btn" type="text" readonly
                                            v-model="item.EndTime" v-bind:data-value="item.EndTime"
                                            v-bind:data_id="item.ID" />
                                    </div>
                                    <div v-if="!item.CanChangeEndTime" class="aui-list-item-input txtright">
                                        {{item.EndTime}}
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
                <div class="cl"></div>
            </div>














            <div v-if="roomModel.feeList.length==0" class="aui_list inside list-sidebor">
                <ul class="aui-list aui-form-list summary-list">
                    <div class="emptyField grey">
                        暂无账单
                    </div>
                </ul>
            </div>
        </div>
        <div class="bottomfixed" v-if="list.length>0">
            <div class="select_all">
                <label>
                    <span>优惠：-￥{{TotalDiscountCost.toFixed(2)}};</span>
                    <span>违约金：+￥{{TotalBreakCost.toFixed(2)}};</span>
                    <span>部分收款：-￥{{TotalChargedCost.toFixed(2)}};</span>
                </label>
            </div>
            <!-- <div class="aui-btn aui-btn-primary" style="background: #289FFF;position: absolute;bottom: 5px; left: 15px;right: 15px; line-height: 2.2rem; height: 2.2rem;" v-on:click="do_pay()">
                收费 ￥{{HeJiCost.toFixed(2)}}</div> -->
            <div class="bottom">
                <div class="chooseAll">
                    <label style="position: absolute; left:0; width: 120px;" v-on:click="select_all()">
                        <input style="left:14px;top:2px;" class="aui-radio" type="radio" v-bind:checked="allchecked"
                            name="radio">
                        <label style="padding-left: 15px;">
                            已选: <span>({{TotalFeeCount}})</span>
                        </label>
                    </label>
                </div>

                <div class="aui_bottombtn rightbtn" v-on:click="do_pay()">收费 ￥{{HeJiCost.toFixed(2)}}</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="js/chargeroomfee.js"></script>

</html>